<template>
  <el-dialog title="修改归属商户" :visible.sync="isVisible" @close="handleClose" width="500px">
    <el-form :model="form">
      <!-- 下拉列表选择新的归属企业 -->
      <el-form-item label="修改归属商户" :label-width="'120px'">
        <el-select
          v-model="form.newBusinessesId"
          placeholder="请选择"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in businessesList"
            :key="item.id"
            :label="item.businessesName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- 批量/单条选择船舶 -->
      <!-- 单条选择 -->
      <div v-if="selectedWharf !== null">
        <p>当前选中的船舶：{{ selectedWharf.wharfName }}</p>
      </div>
      <!-- 批量选择 -->
      <div v-else-if="selectedWharfs.length > 0">
        <p>当前选中的船舶数量：{{ selectedWharfs.length }} 条</p>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleUpdateBusinesses">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { batchUpdateBusinesses } from '@/api/wharf';
export default {
  props: {
    initialSelectedWharf: Object, // 单条船舶数据（如果是单条修改时传入）
    initialSelectedWharfs: Array, // 多条船舶数据（如果是批量修改时传入）
    isVisible: Boolean,
    businessesList: Array,
  },
  data() {
    return {
      form: {
        newBusinessesId: '',
      },
      selectedWharf: {},
      selectedWharfs: [],
    };
  },
  watch: {
    initialSelectedWharf(wharf) {
      this.selectedWharf = wharf;
      this.selectedWharfs = [];
    },
    initialSelectedWharfs(wharfs) {
      this.selectedWharf = null;
      this.selectedWharfs = wharfs.slice();
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:isVisible', false);
      this.$emit('close');
    },
    resetForm() {
      this.form.newBusinessesId = '';
      this.selectedWharf = null;
      this.selectedWharfs = [];
    },
    handleUpdateBusinesses() {
      if (this.selectedWharf || this.selectedWharfs.length > 0) {
        const businessesId = this.form.newBusinessesId;

        if (!businessesId) {
          this.$message.error('请选择要修改的商户');
          return;
        }

        // 更新逻辑 - 调用后端接口更新单条或多条船舶的归属企业
        if (this.selectedWharf) {
          // 更新单条船舶
          this.updateSingleWharf(businessesId);
        } else {
          // 更新多条船舶
          this.updateBatchWharfs(businessesId);
        }
      } else {
        this.$message.error('请先选择一个或多个码头');
      }
    },
    updateSingleWharf(businessesId) {
      // 调用后端接口更新单条船舶的归属企业
      // 参数应包含船舶ID和新的归属企业ID
      batchUpdateBusinesses(this.selectedWharf.id, businessesId).then(() => {
        this.$message.success('更新成功');
        this.$emit('updateBusinessesCallBack');
      });
    },
    updateBatchWharfs(businessesId) {
      const wharfIds = this.selectedWharfs.join(',');
      // 调用后端接口批量更新船舶的归属企业
      // 参数应包含一个包含多个船舶ID和新的归属企业ID的对象或数组
      batchUpdateBusinesses(wharfIds, businessesId).then(() => {
        this.$message.success('更新成功');
        this.$emit('updateBusinessesCallBack');
      });
    },
  },
};
</script>
